<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     .abc{
        text-align: center;
    } 
    .cd{
        display:flex;
        width:1002px;
        height:1050px;
        background-color:gray;
        margin: 0 auto;
    }
    .item1{
        background-color:white;
        width:250px;
        margin-bottom: 0px;
    }
    .item2{
        margin-left: auto;
        width:750px;
        height:1050px;
        background-color:white;
    }
    .zj,.box2,.mak,.maj,.mai,.mei,.nei,.box4,.box6,.box8,.wr,.box10,.box11,.box13,.box14{
        display:inline-block;
    }
    .lmk,.lmj,.lmi,.lmo,.imo
    {
        font-size: 12px;
        color:#999;
        margin-left:8px;
    }
    .lnk,.lnj,.lni,.lno,.ino{
        font-size: 12px;
        color: #000; 
        margin-left: 8px;
    }
    .dgf,.hh,.lyl,.xy,.cxc{
        margin-left: 30px;
    }
    .zhb{
        display:inline-block;
    }
    .mal{
        display:inline-block;
        margin-top:0px ;
        
    }
    .box0{
        margin-top: 35px;
    }
    .zb{
        display:flex;
    }
    .hyz{
        height: 35px;
        margin-top: 8px;
    }
    .sjw{
        text-decoration: none;
        color:#0c73c2;
        font-size: 7px;
    }
    .az{
         font-size: 6px;
         color: #999;
    }
    .box1{
        margin-top:35px;
        margin-left: 30px;
    }
    .box4,.box5,.box2{
        margin-left: 25px;
    }
    .box4{
        margin-top: 6px;
    }
    .box5{
        margin-top: 10px;
    }
    .hzp{
        font-size: 20px;
        margin-left: 4px;
        width: 120px; 
        height: 29px;
        line-height: 8px;
    }
    .box3{
        margin-top: 20px;
    }
    .box6{
        height:35px;
    }
    .box7{
        line-height: 35px;
    }
    .box3{
        margin-top: 25px;
        margin-left:30px ;
        display :inline-block;
    }
    .box8{
        margin-left: 488px;
        color:#999
    }
    .xh{
      font-size: 16px;
    }
    .lz{
        color:#999;
        font-size: 4px;
    }
    .wr{
        color: red;
    }
    .box9{
        height:2px;
        width: 750px;
        background-color: red;
        margin-top: 6px;
    }
    .box10{
        width: 301.75px;
        height:38.5px;
        background-color:#F8F8F8;
        color:#999;
        line-height: 38.5px;
        border-collapse: collapse;
        border: space 0;
        border-left: solid 0.5PX gray;
    }
    .box11{
        width:111px;
        height: 38.5px;
        background-color:#F8F8F8;
        line-height: 38.5px;
        color:#999;
        margin-left: -4px;
        border-left: solid 0.5PX gray;
        border-right:solid 0.5px gray;
        border-collapse: collapse;
        border: space 0;
    }
    .box12{
        margin-left: 74.5px;
        height:38.5px;
    }
    .box8{
      font-size: 5px;
    }
    .box13{
        width:103.45px;
        height:38.5px;
        background-color:#F8F8F8;
        margin-left: -5px;
        line-height: 38.5px;
        border-left: solid 0.5PX gray;
        border-right: solid 0.5PX gray;
        border-collapse: collapse;
        border: space 0;
    }
    .box14{
        width: 156.3px;
        height: 38.5px;
        background-color:#F8F8F8;
        margin-left: -4px;
        line-height: 38.5px;
        border-collapse: collapse;
        border: space 0;
    }
    .un1,.un7,.un13,.un19,.un25,.un31,.un37,.un43,.un49,.un55,.un61,.un67,.un73,
    .un79,.un85,.un91{
        width: 750px;
        height: 30px;
        background-color: chartreuse;
        border-collapse: collapse;
        border: space 0;
        margin-top: 0px;
        display: inline-block;
    }
    .un2,.un8,.un14,.un20,.un26,.un32,.un38,.un44,.un50,.un56,.un62,.un68,.un74,
    .un80,.un86,.un92{
        width: 74.5px;
        height: 30px;
        line-height: 30px; 
        color: #999;
        margin-bottom: 5px;
        text-align: center;
        display: inline-block;
    }
    .um1,.um6,.um11,.um16,.um21,.um26,.um31,.um36,.um41,.um46,.um51,.um56,
    .um61,.um66,.um71,.um76{
        display:inline-block;
        line-height: 30px;
        margin-top: 6px;
        margin-left: 18px;
    }
    .un3,.un9,.un15,.un21,.un27,.un33,.un39,.un45,.un51,.un57,.un63,.un69,.un75,
    .un81,.un87,.un93{
        width: 301.75px;
        height:30px;
        display: inline-block;
        margin-top: 0px;
    }
    .um2,.um7,.um12,.um17,.um22,.um27,.um32,.um37,.um42,.umm47,.um52,
    .um57,.um62,.um67,.um72,.um77{
        height: 18px;
        width: 281.75px;
        display: inline-block;
        line-height: 18px;
    }
     .un4,.un10,.un16,.un22,.un28,.un34,.un40,.un46,.un52,.un58,.un64,.un70,
     .un76,.un82,.un88,.un94{
        width: 111px;
        height: 30px;
        display: inline-block;
     }
     .um3,.um8,.um13,.um18,.um23,.um28,.um33,.um38,.um43,.um48,.um53,
     .um58,.um63,.um68,.um73,.um78{
        width: 30.03px;
        height: 14px;
        display: inline-block;
     }
     .un5,.un11,.un17,.un23,.un29,.un35,.un41,.un47,.un53,.un59,.un65,.un71,
     .un77,.un83,.un89,.un95{
        width: 103.45px;
        height: 30px;
        display: inline-block;
     }
     .um4,.um9,.um14,.um19,.um24,.um29,.um34,.um39,.um44,.um49,.um54,.um59,
     .um64,.um69,.um74,.um79{
        width: 83.45px;
        height: 18px;
        display: inline-block;
     }
     .un6,.un12,.un18,.un24,.un30,.un36,.un42,.un48,.un54,.un60,.un66,
     .un72,.un78,.un84,.un90,.un96{
        width: 140.3px;
        height:30px;
        display: inline-block;
     }
     .um5,.um10,.um15,.um20,.um25,.um30,.um35,.um40,.um45,.um50,.um55,
     .um60,.um65,.um70,.um75,.um80{
        width: 127.8px;
        height: 18px;
        display: inline-block;
     }
     .box12{
       color:#999;
       font-size: 8px;
     }
     .lr{
      color:white;
      width:750px;
      height: 40px;
     }
     .psm{
      width: 720px;
      height: 35px;
      background-color:white;
      margin-left: 30px;
     }
     .box15{
      display: inline-block;
     }
     .qw{
      font-size: 20px;
     }
     .po{
      font-size: 7px;
      color:#999;
      margin-left: 10px;
     }
     .yu{
      width: 750px;
      height: 3px;
      background-color:red;
     }
     .me{
       width:676px;
       height: 98px;
       background-color:white;
       margin-top: 10px;
       margin-left: 25px;
       display: inline-block;
     }
     .you{
      width: 50px;
      display: inline-block;
      margin-top: 10px;
     }
     .example{
      border:1px solid #a1a1a1;
      width:614px;
      display: inline-block;
      height: 63px;
      margin-top: 0px;
     }
     .fg{
      display: inline-block;
      font-size: 10px;
     }
     .he{
      margin-left: 78px;
      background-color: white;
      height: 30px;
      width: 624px;
     }
     .her{
      margin-top:5px;
      margin-left:5px;
     }
    .they,.her,.he, .your,.them{
      display: inline-block;
     }
     .they{
      margin-left:495px;
     }
     .them{
      font-size: 8px;
      color:#999;
     }
     .your{
      font-size: 16px;
      color: white;
      background-color:#3080CC;
      margin-left: 10px;
     }
     .their{
      text-decoration: none;
     }
     .un1,.un13,.un25,.un37,.un49,.un61,.un73,.un85{
      background-color: #F7F7F7;
      font-size: 8px;
     }
     .un7,.un19,.un31,.un43,.un55,.un67,.un79,.un91{
      background-color: #FFFFFF;
      font-size: 8px;
     }
    .um46,.um51,.um56,.um61,.um66,.um71,.um76{
      margin-right: 5.5px;
     }
     .blackpart {
            height: 70px;
            background-color: #242424;
            border-bottom: 1px solid #000;
        }

        .blackbody {
            width: 1500px;
            margin: auto;
        }

        .blackbody .container {
            width: 1135px;
            display: flex;
            position: relative;
            margin-left: 110px;
        }

        .blackbody .container .brand {
            position: relative;
            top: 8px;
            left: -40px;
        }

        .blackbody .container .choice {
            width: 510px;
            display: flex;
            align-items: center;
            position: relative;
            left: -40px;
        }

        .blackbody .container .choice a {
            text-decoration: none;
            font-size: 14px;
            color: #ccc;
            line-height: 70px;
            text-align: center;
        }

        .blackbody .container .choice .word {
            padding: 0 19px 0 19px;
        }

        .blackbody .container .choice .word:hover {
            background-color: #000;
        }

        .blackbody .container .choice .cur1 {
            background-color: #000;

        }

        .blackbody .container .choice .cur1 {
            color: #fff;
        }

        .blackbody .container .choice .cur2:hover {
            color: #fff;
        }

        .blackbody .container .hot {
            width: 28px;
            height: 17px;
            border-radius: 40%;
            background-color: #C20C0C;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 17px;
            position: absolute;
            top: 20px;
            left: 667px;
        }

        .blackbody .container .search {
            margin-top: 19px;
            margin-left: 85px;
            background-color: #fff;
            border-radius: 32px;
            font-size: 12px;
            color: #9b9b9b;
            width: 158px;
            height: 32px;
            line-height: 32px;
        }

        .blackbody .container .search span {
            padding: 0 0 0 13px;
        }

        .blackbody .container .search img {
            position: relative;
            top: 3px;
            left: 10px;
        }

        .blackbody .container .centers {
            width: 90px;
            height: 32px;
            margin: 19px 0 0 12px;
            border: 1px solid #4F4F4F;
            border-radius: 20px;
            line-height: 32px;
            color: #ccc;
            font-size: 12px;
            text-align: center;
            text-decoration: none;
        }

        .blackbody .container .centers:hover {
            border: 1px solid #ccc;
            color: #fff;
        }

        .blackbody .container .signin {
            height: 45px;
            width: 28px;
            position: relative;
            top: 23px;
            left: 22px;
        }

        .blackbody .container .signin a {
            text-decoration: none;
            color: #787878;
            font-size: 12px;
            text-align: center;
        }

        .blackbody .container .signin a:hover {
            color: #666;
            text-decoration: underline;
        }

        .redbody {
            height: 5px;
            background-color: #C20C0C;
            border-bottom: 1px solid #a40011;
        }

        .redbody .container {
            width: 1135px;
            margin: auto;
        }

        .redbody .container .items {
            width: 600px;
            height: 5px;
            display: flex;
            justify-content: space-around;
            margin-left: 110px;
            position: relative;
            align-items: center;
        }

        .redbody .container .items .smallarrow {
            height: 0;
            width: 0;
            border-width: 0 6px 6px;
            border-style: solid;
            border-color: transparent transparent #C20C0C;
            position: absolute;
            top: -5px;
            left: 139px;
        }
</style>
<body> 
  <div class="topbody">
    <div class="blackpart">
        <div class="blackbody">
            <div class="container">
                <div class="brand">
                    <a href="#"><img height="55px" src="./图片库/标题部分/网易云音乐logo 图标.png" alt=""></a>
                    <a href="#"><img height="55px" src="./图片库/标题部分/网易云音乐logo 名字.png" alt=""></a>
                </div>
                <div class="choice">
                    <a class="word cur2" target="_blank" href="./index.html">发现音乐</a>
                    <a class="word cur1" href="./chang sir.html">我的音乐</a>
                    <a class="word cur2" target="_blank" href="./meng sir.html">关注</a>
                    <a class="word cur2" href="#">商城</a>
                    <a class="word cur2" href="#">音乐人</a>
                    <a class="word cur2" href="#">下载客户端</a>
                </div>
                <span class="hot">
                    Hot
                </span>
                <div class="search">
                    <img height="14px" src="./图片库/标题部分/搜索.png" alt="">
                    <span>音乐/视频/电台/用户</span>
                </div>
                <a class="centers" href="#">创作者中心</a>
                <div class="signin">
                    <span>
                        <a href="#">登录</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="redbody">
        <div class="container">
            <div class="items">
                <div class="smallarrow"></div>
            </div>
        </div>
    </div>
</div>
<div><h3 class="abc">我的音乐</h3></div>
<div class="cd">
   <div class="item1">
    <div class="box0">
     <p class="lcj">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp我的视频</p>
     <p class="lcj">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp我的电台</p>
     <p class="lcj">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp创建的歌单(5)
      <div class="cxc">
        <img src="./images/38a1f059e74d624adb3d13c1366fdefc_109951165440909677_param=40y40.jpg">
          <div class="nei">   
            <p class="ino">我喜欢的音乐</p>
            <p class="imo">16首</p>
         </div>   
      </div>
      <div class="xy">
        <img src="./images/4a3944fd4b511d25bc482be4314a9f60_109951164905500417_param=40y40.jpg">
          <div class="mei">   
             <p class="lno">外语歌</p>
             <p class="lmo">4首</p>
          </div>   
      </div>
      <div class="lyl">
        <img src="./images/fcc43a7709a1ee7de35910a46d5fd940_109951168211105413_param=40y40.jpg">
          <div class="mai">   
              <p class="lni">古风</p>
              <p class="lmi">7首</p>
          </div>   
      </div>
      <div class="hh">
        <img src="./images/a99adfb865f92312df168f0653e45b0f_109951166562840678_param=40y40.jpg">
          <div class="maj">   
              <p class="lnj">后会有期</p>
              <p class="lmj">3首</p>
          </div>   
      </div>
      <div class="dgf">
        <img src="./images/99c122b49a4b9e3381086f410db26233_94558000004351_param=40y40.jpg">
          <div class="mak">   
              <p class="lnk">emo神曲</p>
              <p class="lmk">16首</p>
          </div>   
      </div>
    </p>
    </div>
   </div>
         <div class="item2">
          <div class="box1">
            <div class="zb">
             <img src="https://p1.music.126.net/y9lNrBamHaQbJno_FrCBAw==/109951165440909677.jpg?param=200y200">
              <div class="mal">
                <div class="box2"><img src="./images/6_{6B5RH`Q{)`GXY_XAPB3C.png" ></div>
                <div class="box2 hzp">我喜欢的音乐</div><br>
                <div class="box4">
                <img class="hyz" src="./images/2d5989502f950ef5ed2b8e02c71aba98_109951168454409068_param=200y200.jpg">
                </div>
                <div class="box6">
                 <div class="box7">
                <div class="box4">
                <a class="sjw" href="#">&nbsp参商_dAXl</a></div>
                <div class="box4 az">&nbsp&nbsp&nbsp2022-10-02 创建</div>
                </div>
                </div><br>
                <div class="box5">
                <img class="zt" src="./images/YT(6A~HO5XWB~H~I[(~ZI6Y.png">
                <img class="zt" src="./images/~3LR6`{XUD0DZD]943O)%]D.png">
                <img class="zt" src="./images/8HXDDSG$VB2%~E1_N]EKKZV.png">
                <img class="zt" src="./images/R1Y9@CT[U`$`H)_BO~([HLH.png">
                <img class="zt" src="./images/U~7}VP`0RW95UNF%%J2Q5TU.png">
                </div>
              </div>
            </div>
          </div>
          <div class="box3 xh">歌曲列表
            <div class="box3 lz">16首歌</div>
            </div>
            <div class="box8">播放：<div class="wr">1</div>次
          </div>
            <div class="box9"></div>
            <div class="box12">
              <div class="box10">歌曲标题</div>
              <div class="box11">时长</div>
              <div class="box13">歌手</div>
              <div class="box14">专辑</div>
            </div>
            <div class="box15">
                    <div class="un1">
                      <div class="un2">1<img class="um1"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un3"><div class="um2">善变</div></div>
                      <div class="un4"><div class="um3">05:50</div></div>
                      <div class="un5"><div class="um4">天堂乐队</div></div>
                      <div class="un6"><div class="um5">壹半壹半</div></div>
                    </div>
                    <div class="un7">
                      <div class="un8">2<img class="um6"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un9"><div class="um7">BUT U</U></div></div>
                      <div class="un10"><div class="um8">03:45</div></div>
                      <div class="un11"><div class="um9">NINEONE</div></div>
                      <div class="un12"><div class="um10">BUT U</div></div>
                    </div>
                    <div class="un13">
                      <div class="un14">3<img class="um11"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un15"><div class="um12">少年</div></div>
                      <div class="un16"><div class="um13">05:11</div></div>
                      <div class="un17"><div class="um14">许巍</div></div>
                      <div class="un18"><div class="um15">爱如少年</div></div>
                    </div>
                    <div class="un19">
                      <div class="un20">4<img class="um16"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un21"><div class="um17">探窗</div></div>
                      <div class="un22"><div class="um18">03:31</div></div>
                      <div class="un23"><div class="um19">挽君</div></div>
                      <div class="un24"><div class="um20">2023合唱集</div></div>
                    </div>
                    <div class="un25">
                      <div class="un26">5<img class="um21"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un27"><div class="um22">冬眠</div></div>
                      <div class="un28"><div class="um23">04:29</div></div>
                      <div class="un29"><div class="um24">司南</div></div>
                      <div class="un30"><div class="um25">冬眠</div></div>
                    </div>
                    <div class="un31">
                      <div class="un32">6<img class="um26"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un33"><div class="um27">苏东坡</div></div>
                      <div class="un34"><div class="um28">03:56</div></div>
                      <div class="un35"><div class="um29">司南</div></div>
                      <div class="un36"><div class="um30">苏东坡</div></div>
                    </div>
                    <div class="un37">
                      <div class="un38">7<img class="um31"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un39"><div class="um32">错位时空</div></div>
                      <div class="un40"><div class="um33">04:26</div></div>
                      <div class="un41"><div class="um34">艾辰</div></div>
                      <div class="un42"><div class="um35">错位时空</div></div>
                    </div>
                    <div class="un43">
                      <div class="un44">8<img class="um36"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un45"><div class="um37">for ya</div></div>
                      <div class="un46"><div class="um38">02:29</div></div>
                      <div class="un47"><div class="um39">蒋小妮</div></div>
                      <div class="un48"><div class="um40">for ya</div></div>
                    </div>
                    <div class="un49">
                      <div class="un50">9<img class="um41"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un51"><div class="um42">凉城</div></div>
                      <div class="un52"><div class="um43">04:25</div></div>
                      <div class="un53"><div class="um44">任然</div></div>
                      <div class="un54"><div class="um45">后继者</div></div>
                    </div>
                    <div class="un55">
                      <div class="un56">10<img class="um46"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un57"><div class="um47">像鱼</div></div>
                      <div class="un58"><div class="um48">05:50</div></div>
                      <div class="un59"><div class="um49">王贰浪</div></div>
                      <div class="un60"><div class="um50">像鱼</div></div>
                    </div>
                    <div class="un61">
                      <div class="un62">11<img class="um51"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un63"><div class="um52">星星在唱歌</div></div>
                      <div class="un64"><div class="um53">05:50</div></div>
                      <div class="un65"><div class="um54">司南</div></div>
                      <div class="un66"><div class="um55">星星在唱歌</div></div>
                    </div>
                    <div class="un67">
                      <div class="un68">12<img class="um56"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un69"><div class="um57">年少有为</div></div>
                      <div class="un70"><div class="um58">04:50</div></div>
                      <div class="un71"><div class="um59">李荣浩</div></div>
                      <div class="un72"><div class="um60">年少有为</div></div>
                    </div>
                    <div class="un73">
                      <div class="un74">13<img class="um61"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un75"><div class="um62">嚣张</div></div>
                      <div class="un76"><div class="um63">04:50</div></div>
                      <div class="un77"><div class="um64">en</div></div>
                      <div class="un78"><div class="um65">嚣张</div></div>
                    </div>
                    <div class="un79">
                      <div class="un80">14<img class="um66"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un81"><div class="um67">演员</div></div>
                      <div class="un82"><div class="um68">04:52</div></div>
                      <div class="un83"><div class="um69">薛之谦</div></div>
                      <div class="un84"><div class="um70">演员</div></div>
                    </div>
                    <div class="un85">
                      <div class="un86">15<img class="um71"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un87"><div class="um72">四季予你</div></div>
                      <div class="un88"><div class="um73">05:20</div></div>
                      <div class="un89"><div class="um74">程响</div></div>
                      <div class="un90"><div class="um75">四季予你</div></div>
                    </div>
                    <div class="un91">
                      <div class="un92">16<img class="um76"src="./images/H1}F{]]EKU9~1{L[6SC71ZQ.jpg"></div>
                      <div class="un93"><div class="um77">不将就</div></div>
                      <div class="un94"><div class="um78">04:55</div></div>
                      <div class="un95"><div class="um79">李荣浩</div></div>
                      <div class="un96"><div class="um80">不将就</div></div>
                    </div>
            </div>
            <div class="lr">
            </div>
            <div class="psm">
              <div class="box15 qw">评论
                <div class="box15 po">共0条评论</div>
                </div>
            </div>
            <div class="yu">
            </div>
            <div class="me">
              <img class="you" src="./images/2d5989502f950ef5ed2b8e02c71aba98_109951168454409068_param=200y200.jpg">
            <div class="example">
              <p class="fg">评论</p>
            </div>
            </div>
            <div class="he">
              <div class="her"><img class="him" src="./images/Y0CGVAL9{W$XH(QK0$1V2QF.jpg"></div>
              <div class="they">
                <div class="them">140</div>
              <div class="your"><a class="their" href="#">评论</a></div>
              </div>
            </div>
       </div>
</div>
</body>
</html>